<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Dashboard Template for Bootstrap</title>
	<!-- Bootstrap core CSS -->
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link th:href="@{/css/dashboard.css}" rel="stylesheet">
	<style type="text/css">
		/* Chart.js */

		@-webkit-keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}

			to {
				opacity: 1
			}
		}

		@keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}

			to {
				opacity: 1
			}
		}

		.chartjs-render-monitor {
			-webkit-animation: chartjs-render-animation 0.001s;
			animation: chartjs-render-animation 0.001s;
		}

		.selectAll,
		.selectInvert {
			/* --bs-btn-padding-y: .25rem;
			--bs-btn-padding-x: .5rem;
			--bs-btn-font-size: .75rem; */
			padding: 0;
		}
	</style>
</head>

<body>
	<!--顶部导航栏-->
	<div th:insert="~{commons/commons::topbar}"></div>

	<div class="container-fluid">
		<div class="row">
			<!--侧边栏-->
			<div th:insert="~{commons/commons::sidebar(active='list.html')}"></div>

			<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
				<h2><a class="btn btn-sm btn-success" th:href="@{/emp}">添加员工</a></h2>
				<div class="table-responsive">
					<table class="table table-striped table-sm">
						<thead>
							<tr>
								<th>
									<!-- <input class="form-check-input" type="checkbox" id="empCheckedAll" onchange="empCheckedAllChange()" value="全选"> -->
									<button type="button" class="btn btn-link btn-sm selectAll" onclick="selectAll()">全选</button>
									<button type="button" class="btn btn-link btn-sm selectInvert" onclick="selectInvert()">反选</button>
								</th>
								<th>id</th>
								<th>lastName</th>
								<th>email</th>
								<th>gender</th>
								<th>department</th>
								<th>birth</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="emp:${employees}">
								<td><input name="empCheckList" type="checkbox" th:value="${emp.getId()}"
										class="empCheckList" onchange="empCheckBoxChange(this)"></td>
								<td th:text="${emp.getId()}"></td>
								<td th:text="${emp.getLastName()}"></td>
								<td th:text="${emp.getEmail()}"></td>
								<td th:text="${emp.getGender()==0?'女':'男'}"></td>
								<td th:text="${emp.department.getDepartmentName()}"></td>
								<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd')}"></td>
								<td>
									<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑</a>
									<a class="btn btn-sm btn-danger" th:href="@{/delemp/}+${emp.getId()}">删除</a>
								</td>
							</tr>
						</tbody>
						<tfoot>
							<th colspan="6">
								<nav aria-label="Page navigation">
									<ul class="pagination" th:with="count=${pages}">
										<li class="page-item Previous"
											th:classappend="${hasPreviousPage}  ? '': 'disabled'"><a class="page-link"
												th:href="@{/emps(pageNum=${pageNum}-1)}" href="#">Previous</a></li>
										<li class="page-item" th:each="index : ${#numbers.sequence(1, count)}"
											th:classappend="(${index}==${pageNum})? 'active':''">
											<a class="page-link" th:href="@{/emps(pageNum=${index})}" href="#"
												th:text="${index}"></a>
										</li>

										<!-- <li class="page-item"><a class="page-link" href="#">1</a></li>
									  <li class="page-item"><a class="page-link" href="#">2</a></li>
									  <li class="page-item"><a class="page-link" href="#">3</a></li> -->
										<li class="page-item Next" th:classappend="${hasNextPage}  ? '': 'disabled'"><a
												class="page-link" th:href="@{/emps(pageNum=${pageNum}+1)}"
												href="#">Next</a></li>
									</ul>
								</nav>
								<!-- <div class="">
									<span th:text="'共'+ ${pages}+'页'"></span>
									<a th:if="${hasPreviousPage}" th:href="@{/emps(pageNum=1)}"
										class="">首页</a>
									<span th:if="${hasPreviousPage}"><a href="#"
											th:href="@{/emps(pageNum=${pageNum}-1)}" class="link-primary">上一页</a></span>
									<span th:if="${hasNextPage}"><a href="#" th:href="@{/emps(pageNum=${pageNum}+1)}" class="link-primary">下一页</a></span>
									<a th:if="${hasNextPage}" th:href="@{/emps(pageNum=${pages})}" class="">尾页</a>
								</div> -->
							</th>
						</tfoot>
					</table>

				</div>
			</main>
		</div>
	</div>

	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>

	<!-- Icons -->
	<script type="text/javascript" th:src="@{/js/feather.min.js}"></script>
	<script>
		feather.replace()
	</script>

	<!-- Graphs -->
	<script type="text/javascript" th:src="@{/js/Chart.min.js}"></script>
	<script>
		var ctx = document.getElementById("myChart");
		var myChart = new Chart(ctx, {
			type: 'line',
			data: {
				labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
				datasets: [{
					data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
					lineTension: 0,
					backgroundColor: 'transparent',
					borderColor: '#007bff',
					borderWidth: 4,
					pointBackgroundColor: '#007bff'
				}]
			},
			options: {
				scales: {
					yAxes: [{
						ticks: {
							beginAtZero: false
						}
					}]
				},
				legend: {
					display: false,
				}
			}
		});
	</script>

	<!-- PageHelper Js -->
	<script>
		var empCheckedAll = document.querySelector("#empCheckedAll");
		var empCheckList = document.querySelectorAll('.empCheckList');
		// var empCheckedAllChange = function () {
		// 	if (empCheckedAll.checked) {
		// 		empCheckList.forEach(empCheckBox => {
		// 			empCheckBox.checked = true;
		// 		});
		// 		checkedCount = 5;
		// 	}
		// 	else {
		// 		checkedCount = 0;
		// 		empCheckList.forEach(empCheckBox => {
		// 			empCheckBox.checked = false;
		// 		});
		// 	}
		// };
		// var empCheckBoxChange = function (empCheckBox) {
		// };

		var isSelectAll = false;
		var selectAll = function () {
			if (isSelectAll) {
				empCheckList.forEach(empCheckBox => {
					empCheckBox.checked = false;
				});
			}
			else {
				empCheckList.forEach(empCheckBox => {
					empCheckBox.checked = true;
				});
			}
			isSelectCheckAll = !isSelectAll;
		}
		var selectInvert = function () {
			empCheckList.forEach(empCheckBox => {
				empCheckBox.checked = !empCheckBox.checked;
			});
		}


		// for (let i = 1; i <= pages.innerHTML; i++) {
		// 	var li = document.createElement("li");
		// 	var a = document.createElement("a");
		// 	li.className='page-item';
		// 	if(i==pageNum.innerHTML) li.classList.add('active');
		// 	a.className='page-link';
		// 	a.href = '/emps?pageNum='+ i;
		// 	a.innerHTML = i;
		// 	// console.log(a);
		// 	li.appendChild(a);
		// 	// console.log(li);
		// 	pagination.insertBefore(li,nextLi);
		// };

	</script>

	<!-- bootstarp-table js -->
	
</body>

</html>